<template>
  <div class="kpi-card">
    <div class="kpi-title">Top1 故障类型</div>
    <div class="kpi-value">{{ topFault.name }}</div>
    <div ref="chartContainer" class="mini-bar"></div>
    <div class="kpi-desc">今日最频发故障</div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
const faultList = [
  { name: '传感器异常', percent: 65 },
  { name: '电池故障', percent: 20 },
  { name: '信号丢失', percent: 15 }
];
const topFault = ref(faultList[Math.floor(Math.random()*faultList.length)]);
const chartContainer = ref(null);
onMounted(() => {
  if (!chartContainer.value) return;
  const chart = echarts.init(chartContainer.value);
  chart.setOption({
    grid: { left: 0, right: 0, top: 0, bottom: 0 },
    xAxis: { type: 'category', data: [topFault.value.name], show: false },
    yAxis: { show: false },
    series: [{ type: 'bar', data: [topFault.value.percent], barWidth: 16, itemStyle: { color: '#409EFF' } }],
    tooltip: { show: false }
  });
});
</script>
<style scoped>
.kpi-card { background: #fff; border-radius: 12px; padding: 18px 8px; text-align: center; box-shadow: 0 2px 8px #f0f1f2; min-width: 180px; }
.kpi-title { font-size: 16px; color: #888; margin-bottom: 8px; }
.kpi-value { font-size: 22px; font-weight: bold; }
.mini-bar { width: 60px; height: 28px; margin: 0 auto; }
.kpi-desc { font-size: 13px; color: #bbb; margin-top: 6px; }
</style>